<template>
  <view class="mine">
    <view class="people-bg">
      <image src="/static/return.png" class="mine-return"></image>
      <view class="mine-box1">
        <view style="height: 120px;">
          <image src="@/static/懒洋洋.png" class="lan"></image>
          <view class="box1-text1">爱吃草莓蛋糕的懒洋洋</view>
          <view class="box1-text2"><text class="box1-text2-1">普通用户</text></view>
          <image src="@/static/my-0.jpg" class="message"></image>
        </view>
        <view class="box-vip">
          <span class="vip1">会员中心</span>
          <span class="vip2">|&nbsp;首次开会员,领取66元专享红包！</span>
          <span class="vip3">&nbsp;立即开通&nbsp;</span>
        </view>
        <view class="box-money">
          <navigator url="../other/other">
            <span class="money">
              <view class="money1"><span style="font-size: 12px;">￥</span>0</view>
              <view class="money2">余额</view>
            </span>
          </navigator>
          <navigator url="../other/other">
            <span class="money">
              <view class="money1">3</view>
              <view class="money2">优惠券</view>
            </span>
          </navigator>
          <navigator url="../other/other">
            <span class="money">
              <view class="money1">0</view>
              <view class="money2">金额</view>
            </span>
          </navigator>
          <navigator url="../other/other">
            <span class="money">
              <view class="money1"><span style="font-size: 12px;">￥</span>4</view>
              <view class="money2">收益</view>
            </span>
          </navigator>
        </view>
      </view>
    </view>
    <view class="mine-box2">
      <view class="box2-top">
        <navigator url="../other/other">
          <span class="box2-text1">我的订单</span>
          <span class="box2-text2">全部订单 ></span>
        </navigator>
      </view>
      <view style="display: flex;padding-top: 20px;">

        <span class="box2-small">
          <navigator url="../other/other">
            <image src="@/static/my-1.jpg" class="box2-img"></image>
            <view class="box2-text3">待支付</view>
          </navigator>
        </span>
        <span class="box2-small">
          <navigator url="../other/other">
            <image src="@/static/my-2.jpg" class="box2-img"></image>
            <view class="box2-text3">待配送</view>
          </navigator>
        </span>
        <span class="box2-small">
          <navigator url="../other/other">
            <image src="@/static/my-3.jpg" class="box2-img"></image>
            <view class="box2-text3">配送中</view>
          </navigator>
        </span>
        <span class="box2-small">
          <navigator url="../other/other">
            <image src="@/static/my-4.jpg" class="box2-img"></image>
            <view class="box2-text3">待支付</view>
          </navigator>
        </span>
        <span class="box2-small">
          <navigator url="../other/other">
            <image src="@/static/my-5.jpg" class="box2-img"></image>
            <view class="box2-text3">售后</view>
          </navigator>
        </span>
      </view>
    </view>
    <view class="mine-box2">
      <view class="box2-top">
        <span class="box2-text1">我的服务</span>
      </view>
      <view style="display: flex;padding-top: 20px;">
        <span class="box3-small">
          <navigator url="../other/other">
            <image src="@/static/my-6.jpg" class="box3-img"></image>
            <view class="box3-text">积分商城</view>
          </navigator>
        </span>
        <span class="box3-small">
          <navigator url="../other/other">
            <image src="@/static/my-7.jpg" class="box3-img"></image>
            <view class="box3-text">商品收藏</view>
          </navigator>
        </span>
        <span class="box3-small">
          <navigator url="../other/other">
            <image src="@/static/my-8.jpg" class="box3-img"></image>
            <view class="box3-text">推荐有礼</view>
          </navigator>
        </span>
        <span class="box3-small">
          <navigator url="../other/other">
            <image src="@/static/my-9.jpg" class="box3-img"></image>
            <view class="box3-text">助力免费拿</view>
          </navigator>
        </span>
      </view>
    </view>
    <view class="mine-box4">
      <view class="box2-text1">安全中心</view>
      <view class="box4-small" style="padding-top: 10px;">

        <image src="@/static/my-10.jpg" class="box4-img"></image>
        <navigator url="../other/other">
          <span class="box4-text1">客服与帮助</span>
          <span class="box4-text2">></span>
        </navigator>
      </view>
      <view class="box4-small">
        <image src="@/static/my-11.jpg" class="box4-img"></image>
        <navigator url="../other/other">
          <span class="box4-text1">收货地址</span>
          <span class="box4-text2" style="padding-left: 446rpx;">></span>
        </navigator>
      </view>
      <view class="box4-small">
        <image src="@/static/my-12.jpg" class="box4-img"></image>
        <navigator url="../other/other">
          <span class="box4-text1">设置</span>
          <span class="box4-text2" style="padding-left: 500rpx;">></span>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>

</script>

<style lang="scss">
  .people-bg {
  	 background-image: linear-gradient(to bottom, #CDF1DD, #FDFEFE);
    width: 100%;
  }
  .mine-box1 image:nth-child(0){
    
    
  }

  .box4-text2 {
    padding-left: 210px;
    color: #929292;
  }

  .box4-text1 {
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .box4-img {
    width: 8%;
    height: 28px;
    position: relative;
    bottom: 1px;
  }

  .box4-small {
    display: flex;
    padding: 4px;
    padding-left: 10px;
  }

  .mine-box4 {
    width: 96%;
    height: 400rpx;
    margin: 0 auto;
    /* margin-left: 14px; */
    border-radius: 10px;
  	 overflow: hidden;
    background-color: #f8fbf9;
    margin-top: 12px;
  	 padding-top: 10px;
  }

  .box3-text {
    font-size: 26rpx;
    font-weight: bold;
  }

  .box3-img {
    width: 50%;
    height: 30px;
  }

  .box3-small {
    width: 20%;
    margin: 0 auto;
    text-align: center;
  }

  .box2-img {
    width: 60%;
    height: 28px;
  }

  .box2-small {
    width: 18%;
    padding-left: 10px;
    text-align: center;
  }

  .box2-text3 {
    font-size: 12px;
  	 font-weight: bold;
  }

  .box2-text2 {
    font-size: 14px;
    padding-left: 400rpx;
  }

  .box2-text1 {
    font-size: 16px;
    font-weight: bold;
    padding-left: 14px;
  }

  .mine-box2 {
    width: 96%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
  	 background-color: #f8fbf9;
    margin-top: 12px;
    height: 110px;
    padding-top: 10px;
  }

  .money2 {
    font-size: 14px;
    font-weight: bold;
  }

  .money1 {
    font-size: 20px;
    font-weight: bold;
    color: #36ae6b;
  }

  .money {
  	 margin: 20px;
    margin-left: 30px;
    text-align: center;
  }

  .box-money {
    display: flex;
    justify-content: space-around;
  }

  .vip3 {
    font-size: 24rpx;
    border-radius: 12px;
    background-color: #f1fcf6;
    color: #4bc380;
  	 padding: 2px;
    margin-left: 20px;
    position: relative;
    top: 8px;
  }

  .vip2 {
    font-size: 24rpx;
    color: #ebfaf2;
    padding-left: 14px;
    position: relative;
    top: 8px;
  }

  .vip1 {
    color: #ffffff;
    font-weight: bold;
  	 font-size: 15px;
    padding-left: 16px;
    position: relative;
  	 top: 8px;
  }

  .box-vip {
    background: linear-gradient(to right, #3EB874, #7EEDAF);
    border-radius: 8px;
    height: 40px;
  }

  .message {
    width: 8%;
    height: 24px;
    position: relative;
  	 left: 320px;
    bottom: 110px;
  }

  .box1-text2 {
  	 width: 15%;
    padding: 4rpx 6rpx 4rpx 8rpx;
    border-radius: 5px;
  	 background-color: #3eb874;
    color: #ffffff;
    font-size: 12px;
    position: relative;
    left: 94px;
    bottom: 76px;
  }

  .box1-text2-1 {
    margin-left: 2px;
  }

  .box1-text1 {
    font-size: 16px;
  	 font-weight: bold;
    position: relative;
    left: 94px;
    bottom: 84px;
  }

  .lan {
    width: 20%;
    height: 54px;
    padding: 26px;
  }

  .mine-box1 {
  	 width: 96%;
    background: rgba(255, 0, 0, 0.5);
  	 margin: 0 auto;
    /* opacity: 0.5; */
    background-repeat: no-repeat;
    background-size: 900rpx;
    background-position: 10rpx;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f8fbf9;
  }

  .mine-return {
    width: 3%;
    height: 20px;
    padding: 14px;
  }

  .mine {
    width: 100%;
    height: 750px;
    margin: 0 auto;
    background-color: #f5f5f5;
  }
</style>
